<template>
    <el-container style="height:100%">
        <el-main>
            <div class="searchArea">
                <div class="set_box">
                    <div
                        v-show="setVisible"
                        class="set_content"
                        @mouseleave="mouseleave()"
                    >
                        <el-checkbox-group
                            v-model="tableHeadData"
                            :min="1"
                        >
                            <el-checkbox
                                v-for="(item,index) in tableHeadAllData"
                                :key="index"
                                :label="item"
                            >
                                {{ item.comment }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <el-form
                    ref="form"
                    label-width="120px"
                    inline
                    style="float:right;margin-right:60px;"
                >
                    <el-form-item label="业务系统：">
                        <el-select
                            v-model="systemName"
                            placeholder
                            @change="changeSystem"
                        >
                            <el-option
                                v-for="item in systemList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据类型：">
                        <el-select
                            v-model="dataType"
                            placeholder
                            @change="changeDataType"
                        >
                            <el-option
                                v-for="item in dataTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否异常：">
                        <el-select
                            v-model="isException"
                            placeholder
                            @change="changeException"
                        >
                            <el-option
                                v-for="item in ExceptionList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            v-model="tableName"
                            class="searchTxt"
                            placeholder="请输入数据项集名称查询"
                            @keyup.enter.native="search"
                        >
                            <i
                                slot="suffix"
                                style="color: #0090ff;cursor: pointer;"
                                class="OSS iconsousuo"
                                @click="search"
                            ></i>
                        </el-input>
                        <span
                            class="OSS iconshezhi"
                            @click="sethandel"
                        ></span>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <!-- 表格 -->
                <el-table
                    ref="databaseTable"
                    v-loading="loading"
                    :data="databaseTableData"
                    height="calc(100vh - 260px)"
                    tooltip-effect="light"
                    style="width: 100%"
                ></el-table>
                <el-table-column
                    fixed
                    label="序号"
                    width="60"
                >
                    <template slot-scope="scope">
                        {{ indexMethod(scope.$index) }}
                    </template>
                </el-table-column>
                <template v-for="(item,index) in tableHeadData">
                    <el-table-column
                        :key="index"
                        :prop="item.name"
                        :label="item.comment"
                        show-overflow-tooltip
                        min-width="180"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.column.property==='taskStartTime'">
                                <span>{{ scope.row.taskStatus==5 ? '' : scope.row.taskStartTime | formateDateTime }}</span>
                            </span>
                            <span v-else-if="scope.column.property==='taskEndTime'">
                                <span>{{ (scope.row.taskStatus==5||(scope.row.taskStatus==1&&scope.row.isPeriod=='3')) ? '' : scope.row.taskEndTime | formateDateTime }}</span>
                            </span>
                            <span v-else-if="scope.column.property==='intervalMs'">
                                <span>{{ cronChangeDate(scope.row) }}</span>
                            </span>
                            <span v-else-if="scope.column.property==='writeRecordsCount'">
                                <span v-if="scope.row.accessWay!=3">{{ scope.row.writeRecordsCount }}</span>
                                <span v-if="scope.row.accessWay==3">无</span>
                            </span>
                            <span v-else>{{ scope.row[scope.column.property] }}</span>
                        </template>
                    </el-table-column>
                </template>
                <el-table-column
                    label="操作"
                    width="400"
                    align="center"
                >
                    <template>
                        <el-tooltip
                            class="item"
                            effect="light"
                            content="查看详情"
                            placement="top"
                        >
                            <i
                                class="OSS iconwenbenxiangqing"
                                @click="Detail(scope.$index, scope.row)"
                            ></i>
                        </el-tooltip>
                        <!-- </div> -->
                    </template>
                </el-table-column>
                <!-- 分页 -->
                <div
                    class="clearfix enc-pagination"
                    style="margin:20px 0"
                >
                    <el-pagination
                        style="float:right"
                        background
                        :current-page="currentPage"
                        :page-sizes="[10,20,50,100]"
                        :total="databaseTableDataTotal"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper,sizes,total"
                        @size-change="handleSizeChange"
                        @current-change="goPage"
                    ></el-pagination>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script>
// import { queryViewColumns, updateViewColumns } from '@/api/accessMonitorSurvey';

export default {
    name: 'Index',
    data() {
        return {
            loading: false,
            systemName: '',
            systemList: [],
            dataType: '',
            dataTypeList: [],
            isException: '',
            ExceptionList: [],
            tableName: '',
            currentPage: 1,
            pageSize: 10,
            setVisible: false,
            tableHeadData: [],
            databaseTableData: [],
            databaseTableDataTotal: 1,
        };
    },
    components: {},
    created() {
        this.init();
    },
    methods: {
        init() {
            this.loading = false;
            // queryViewColumns(){

            // }
        },
        changeSystem() {
            this.init();
        },
        changeDataType() {
            this.init();
        },
        changeException() {
            this.init();
        },
        search() {
            this.init();
        },
        sethandel() {
            this.setVisible = !this.setVisible;
        },
        mouseleave() {
            this.setVisible = !this.setVisible;
        },
        indexMethod(index) {
            return (this.currentPage - 1) * this.pageSize + index + 1;
        },
    },
};
</script>

<style lang="scss">
.searchArea {
  float: right;
  display: flex;
  flex-direction: row;
  margin: 10px 0 0 0;
  .searchTxt {
    width: 259px;
    margin-right:10px;
  }
}
.set_box {
  margin: 10px 0 20px 0;
  position: absolute;
  right:10vh;
  .el-checkbox-group > label {
    display: block;
  }
  > span {
    /* position: absolute;
    left: 10px;
    top: 2px; */
    margin-left: 10px;
    cursor: pointer;
  }
  .el-checkbox {
    width: auto;
  }
  .set_content {
    position: absolute;
    top: 20px;
    background-color: #ffffff;
    z-index: 1001;
    border: 1px solid #e6eaed;
    padding: 8px;
    //height: 300px;
    overflow: auto;
  }
}
</style>
